<template>
  <div id="RTreenode">
    <li>
      <div @click="leftClick()" @contextmenu="rightClick()" :style="itemStyle">
          <v-icon class="ricon" :color="color" >{{iconStr}}</v-icon>
          <span class="text">{{text}}</span>
      </div>
      <ul v-if="isdir" v-show="show">
        <r-treenode
          v-for="item in items"
          :data="item"
          :key="item[itemkey]"
          :rkey="item[itemkey]"
          :text="item[itemtext]"
          :items="item.children"
          :isdir="item.isdir"
          :level="level+1"
          :color="color"
        >
        </r-treenode>
      </ul>
    </li>
  </div>
</template>

<script>
export default {
    name:"RTreenode",
    data() {
       return {
            tree: { changed: false }, // 用来监听 tree 数据是否变化。绑定到根的 RTree 节点
            open: {},
            mousehover: {},
            show: false,
            active: false, 
       }
    },
    props:{
        data:{},
        items:{ type:Array },
        rkey:{type:String},
        text:{type:String},
        // 每个单元唯一的键值,在 item中的这个字段
        isdir: {type:Boolean},
        hoverable: {type:Boolean},
        color: {type:String },
        activatable:{
            type:Boolean
        },
        level:{
            type:Number,
            default:2
        },
      
    },
    computed:{
        // 静态计算样式
        itemStyle() {
                let actived = ""
                if(this.active) {
                    actived = this.tree.getData("active", this.rkey)?"background:#d9f0ff;":""
                }
                let pdleft = "padding-left:" + this.level * 12 + "px;"
                return  actived + pdleft
        } ,
        itemtext() { return this.tree.$props.itemtext },

        itemkey() { return this.tree.$props.itemkey },
        iconStr() {
            if(this.isdir) {
                return this.show ? this.tree.dirOpenIcon : this.tree.dirCloseIcon
            }else{
                return this.tree.fileIcon
            }
        }
    },
    methods:{
        leftClick() {
            this.tree.setOnceData('active', this.rkey, true)
            this.tree.toggleData('show', this.rkey)
            this.invokeEvent("leftClick", [this.data])
        },
        rightClick() {
            this.invokeEvent("rightClick", [this.data])
        },
        // 初始化当前节点的状态
        registerStore(){
            this.tree.store.show[this.rkey] = true
        },
        updateStatus() {
            this.show = this.tree.getData("show", this.rkey)
            this.active = this.tree.getData("active", this.rkey)
        },
        invokeEvent(event, data) {
            switch(event) {
                // 点击节点
                case 'leftClick': 
                    this.tree.$emit("leftClick", data)
                    break;
                case 'rightClick': 
                    this.tree.$emit("rightClick", data)
                    break;
                
            }
        }
    },
    created() {
        const parent = this.$parent;

        if(parent.isTree) {
            this.tree = parent
        } else {
            this.tree = parent.tree
        }

        this.registerStore()
    },
    // 手动判断是否发生变化
    // 初始化 watch 对象时，将会注册该属性的所有值。
    watch: {
        'tree.change':  {
            handler() {
                this.updateStatus()
            },
            deep: true
        }
    }
}
</script>

<style lang="scss" scoped>
#RTreenode {
  user-select: none;
  ul,
  li {
    list-style: none;
    padding: 0;
  }
    li>div {
        padding-top:8px;
        padding-bottom:8px;
    }
    li>div:hover {
        background: #f0f0f0;
    }
    .text {
        padding:0 8px;
    }
    .ricon{
        font-size:20px;
    }
}
</style>
